<template>
  <div>
    <el-dialog
      :model-value="showOrder.$state.show"
      title="订单跟踪"
      width="30%"
      @close="showOrder.$state.show = false"
    >
      <div style="height: 400px">
        <el-steps
          :space="200"
          :active="6"
          finish-status="success"
          direction="vertical"
        >
          <el-step
            title="订单已提交,等待付款"
            description="2017-04-01 12:00:00"
          />
          <el-step title="订单付款成功" description="2017-04-01 12:00:00" />
          <el-step
            title="在北京市进行下级地点扫描,等待付款"
            description="2017-04-01 12:00:00"
          />
          <el-step
            title="在分拨中心广东深圳公司进行卸车扫描,等待付款"
            description="2017-04-01 12:00:00"
          />
          <el-step
            title="在广东深圳公司进行发出扫描"
            description="2017-04-01 12:00:00"
          />
          <el-step
            title="到达目的地网点广东深圳公司,快件将很快进行派送"
            description="2017-04-01 12:00:00"
          />
          <el-step
            title="订单已签收,期待再次为您服务"
            description="2017-04-01 12:00:00"
          />
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { isShowOrder } from "@/store/showOrder";
const showOrder = isShowOrder();
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});

</script>

<style></style>
